React-Query 캐싱 활용하기

노션 블로그에서 하위 페이지 이동 시 발생하는 불필요한 API 호출로 인한 성능 저하 문제가 관찰되었습니다.

기존의 커스텀 훅 방식에서는 페이지 ID가 변경될 때마다 API를 호출하여 데이터를 가져왔으며, 이는 이미 방문했던 페이지를 다시 방문할 때도 동일하게 발생했습니다.


export const useCustomRecordMapFetch = (pageId: string) => {
    const [data, setData] = useState<ExtendedRecordMap | null>(null);
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        if (!pageId) return;

        const fetchData = async () => {
            setIsLoading(true);
            try {
                const result = await getRecordMap(pageId);
                setData(result);
                setError(null);
            } catch (err) {
                setError(err as Error);
                setData(null);
            } finally {
                setIsLoading(false);
            }
        };

        fetchData();
    }, [pageId]);

    return { data, isLoading, error };
};

이 구현은 React의 useEffect를 사용한 커스텀 훅으로, pageId의 변경을 감지하여 API를 호출하는 방식이었습니다. 하지만 이는 다음과 같은 한계를 보였습니다

동일 페이지 재방문 시에도 새로운 API 호출 발생

페이지 간 빠른 이동 시 불필요한 데이터 Fetch

이전 방문 데이터의 재활용 불가

이러한 문제를 해결하기 위해 React Query를 도입하여 데이터 캐싱을 구현했습니다.

queryKey를 pageId로 설정하여 페이지별 캐시 데이터 관리

사용자 행동 패턴 분석을 통한 캐시 설정 최적화

네이버 블로그 사용자 데이터 분석 결과, 페이지당 평균 체류 시간이 2~3분
이를 반영하여 gcTime Default인 5분으로 설정

Stale state 시 불필요한 리페칭 방지를 위한 옵션 설정

refetchOnWindowFocus: false
refetchOnMount: false
refetchOnReconnect: false


export const useRecordMapFetch = (pageId:string) => {
    return(
        useQuery<ExtendedRecordMap>({
            queryKey: ["recordMap",pageId],
            queryFn: () => getRecordMap(pageId),
            enabled: !!pageId,
            retry:false,
            refetchOnWindowFocus:false,
            refetchOnMount:false,
            refetchOnReconnect:false,
        })  
    )
}

이를 이용하여 포스트 내 하위 페이지 5번 이동 시나리오로 성능을 측정한 결과

API 호출 횟수

기존 방식: 10회

개선 후: 5회 (50% 감소)

응답 시간

기존 방식: 460ms

개선 후: 185ms (약 60% 개선)

React Query의 캐싱 도입을 통해 불필요한 API 호출을 효과적으로 줄이고, 페이지 이동 시 응답 시간을 크게 개선했습니다. 이는 사용자 경험 향상에 직접적인 영향을 미쳤으며, 서버 부하 감소에도 기여했습니다.